<template>
    <div style="width: 750px;">
        <list class="list">
            <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
                     :display="refreshing ? 'show' : 'hide'">
                <loading-indicator style="width: 50px;height: 50px;color: #00c26e;"
                                   class="indicator"></loading-indicator>
            </refresh>
            <cell class="cell" v-for="ele in dataList">
                <div class="content speech-content">
                    <div class="item-head">
                        <image class="photo" src="root:img/my_photo.png"></image>
                        <div class="item-user-info">
                            <div class="item-user-name" style="height: 40px;">
                                <text style="line-height: 6px;font-size: 28px;width: 220px;margin-left: 15px;">
                                    {{ele.sourceUser}}
                                </text>
                                <text style="font-size: 28px;color:#999999;">{{ele.sectionName}}</text>
                            </div>
                            <div>
                                <text style="font-size: 24px;color:#999999;">{{formatTime(ele.createTime)}}
                                </text>
                            </div>
                        </div>
                    </div>
                    <div class="item-content">

                        <text class="item-content-t">{{ textContent(ele.contentText)}}</text>

                        <div v-if="ele.contentType === '1300'" style="flex-direction: row;">
                            <image class="speech-img" v-for="url in imgList(ele.contentFileKey)"
                                   placeholder="root:img/default_yx.png" :src="url"></image>
                        </div>

                        <audio-vue v-if="ele.contentType === '1100'" :time="ele.voiceTime"
                                   :audioSrc="vedioUrl(ele.contentFileKey)"></audio-vue>
                    </div>
                    <div class="item-footer">
                        <div class="item-footer-area item-footer-left">
                            <image class="item-footer-i" src="root:img/read_icon.png"></image>
                            <text class="item-footer-t">阅读({{ele.lookNum}})</text>
                        </div>
                        <div class="item-footer-area item-footer-middle">
                            <image class="item-footer-i" src="root:img/conment_icon.png"></image>
                            <text class="item-footer-t">评论({{ele.commentNum}})</text>
                        </div>
                        <div class="item-footer-area item-footer-right">
                            <image class="item-footer-i" src="root:img/like_icon.png"></image>
                            <text class="item-footer-t">赞({{ele.likeNum}})</text>
                        </div>
                    </div>
                </div>
            </cell>
            <loading class="loading" @loading="loadDataMore" :display="loadinging ? 'show' : 'hide'">
                <loading-indicator class="loading-indicator"></loading-indicator>
            </loading>
        </list>
    </div>
</template>

<style scoped>

    .refresh {
        align-items: center;
        justify-content: center;
    }

    .speech-img {
        width: 230px;
        height: 230px;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
        border-width: 1px;
        border-color: #e9e9e9;
    }

    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .loading-indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .loading-indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }

    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .item-s-t {
        font-size: 24px;
        color: #999999;
        margin-right: 20px;
    }

    .article-item-content {
        flex-direction: row;
        padding-top: 32px;

    }

    .article-item-content-img {
        margin-bottom: 32px;
        width: 200px;
    }

    .article-item-content-title {
        flex-direction: column-reverse;
        width: 520px;
        padding-right: 20px;
        height: 268px;
    }

    .item-footer-i {
        width: 34px;
        height: 23px;
        margin-right: 5px;
    }

    .item-footer-t {
        font-size: 25px;
        color: #272727;
    }

    .item-footer-area {
        width: 240px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .item-footer {
        height: 78px;
        flex-direction: row;
        border-top-width: 1px;
        border-top-color: #f0f0f0;
        margin-top: 20px;
    }

    .item-content-t {
        font-size: 32px;
        color: #272727;
    }

    .item-content {
        padding-top: 20px;
    }

    .item-user-info {
        flex-direction: column-reverse;
        margin-left: 10px;
    }

    .item-user-name {
        font-size: 30px;
        margin-bottom: 15px;
        font-weight: bold;
        flex-direction: row;
    }

    .photo {
        height: 80px;
        width: 88px;
        border-radius: 100px;
        margin-left: 10px;

        border-width: 1px;
        border-color: #717171;
    }

    .item-head {
        flex-direction: row;
        margin-top: 32px;
    }

    .item-container {
        width: 750px;
        background-color: #f2f3f4;
    }

    .border-cell {
        background-color: #f2f3f4;
        width: 750px;
        height: 100px;
        align-items: center;
        justify-content: center;
        border-bottom-width: 1px;
        border-style: solid;
        border-color: #e0e0e0;
    }

    .cell {
        background-color: #ffffff;
    }

    .content {
        width: 750px;
        border-bottom-width: 10px;
        border-bottom-color: #F6F6F6;
        /*align-items: center;*/
        /*justify-content: center;*/
        padding-left: 15px;
        padding-right: 15px;
    }


</style>
<script>

    import nw from '../network/nw.js'
    import dtl from '../utils/dateUtils.js'


    export default {
        components: {},
        data: () => ({
            dataList: [],
            from:1,//加载第几页数据
            refreshing: false,//是否重新加载
            loadinging: false,//是否加载更多
        }),
        created() {

        },
        methods: {

            //加载更多数据
            loadDataMore() {
                this.from = this.from + 1
               this.loadData(this.from)
            },

            formatTime: function (time) {
                return dtl.formatDay(time)
            },

            //内容处理
            textContent(content) {
                if (content == undefined || content == null) {
                    return ''
                }
                content = decodeURIComponent(content)
                return content.length > 66 ? (content.substring(0, 60) + '.....') : content
            },

            //获取媒体地址
            vedioUrl(keyUrl) {
                var arr = keyUrl.split(',')
                return arr[1]
            },

            //刷新数据
            onrefresh(event) {
                this.from = 1
                this.loadData(this.from)
            },

            //加载数据
            loadData(from) {
                var self = this
                var repData = {}
                if (!from) {
                    repData.from = 1
                }else{
                    repData.from = from
                }
                repData.size = 10
                if (repData.from <= 1) {
                    self.refreshing = true
                } else {
                    self.loadinging = true
                }


                nw.postDefine('/app/yxq/user/dynamic', {
                    data: repData,
                    success(res) {
                        if (repData.from <= 1) {
                            self.dataList = res
                            self.refreshing = false
                        } else {
                            console.info(112)
                            for (let i in res) {
                                self.dataList.push(res[i])
                            }
                            self.loadinging = false

                        }
                    }
                })
            }
        },
        mounted() {
            var self = this
            this.loadData(1)
        },
        created() {
        }
    };
</script>